Grid Layout Control#

These view modifiers are used to control the layout behavior of individual views placed inside a Grid structure. They provide fine-grained control over cell spanning, alignment, and sizing, consistent with SwiftUI’s grid system.

gridCellColumns#

Tells a view in a grid to span across multiple columns.

Type#

1gridCellColumns?: number

Description#

Use this modifier to expand a single view across two or more columns. This is typically used for headers or wide content rows.

Example#

1<Grid>
2  <GridRow>
3    <Text gridCellColumns={2}>This spans 2 columns</Text>
4  </GridRow>
5  <GridRow>
6    <Text>Cell A</Text>
7    <Text>Cell B</Text>
8  </GridRow>
9</Grid>

gridCellAnchor#

Specifies a custom alignment anchor within the grid cell.

Type#

1gridCellAnchor?: KeywordPoint | Point

Description#

Use this modifier to align the content of a cell to a specific anchor point, either using a named keyword (such as "center" or "topLeading") or a custom { x, y } point.

Example#

1<Grid>
2  <GridRow>
3    <Text gridCellAnchor="topLeading">Anchored to top leading</Text>
4  </GridRow>
5</Grid>

gridCellUnsizedAxes#

Prevents the view from expanding in the specified directions when placed in a grid cell.

Type#

1gridCellUnsizedAxes?: AxisSet

Description#

This modifier tells the grid not to assign extra size to the view along specified axes, allowing the view to tightly wrap its content.

Options#

• "horizontal" – Prevent horizontal expansion
• "vertical" – Prevent vertical expansion
• "all" – Prevent expansion in both directions

Example#

1<Grid>
2  <GridRow>
3    <Image
4      gridCellUnsizedAxes="horizontal"
5      imageUrl="https://example.com/icon.png"
6    />
7    <Text>Description</Text>
8  </GridRow>
9</Grid>

gridColumnAlignment#

Overrides the default horizontal alignment of the column the view appears in.

Type#

1gridColumnAlignment?: "leading" | "center" | "trailing"

Description#

Affects how all cells in the column are aligned horizontally. Only one view in a column needs to specify this to affect the whole column.

Example#

1<Grid>
2  <GridRow>
3    <Text gridColumnAlignment="trailing">Right-aligned column</Text>
4    <Text>Next Cell</Text>
5  </GridRow>
6</Grid>

Grid and GridRow Structure#

These modifiers are only applicable within the context of the Grid and GridRow components.

Grid#

A container that lays out content in a two-dimensional grid.

Props#

• alignment?: Alignment – Alignment of child views in grid cells
• horizontalSpacing?: number – Spacing between columns
• verticalSpacing?: number – Spacing between rows

Example#

1<Grid>
2  <GridRow>
3    <Text>Hello</Text>
4    <Image systemName="globe" />
5  </GridRow>
6  <Divider />
7  <GridRow>
8    <Image systemName="hand.wave" />
9    <Text>World</Text>
10  </GridRow>
11</Grid>

GridRow#

Represents a horizontal row of views inside a Grid.

Props#

• alignment?: VerticalAlignment – Vertical alignment for cells in the row

Summary#